<template>
	<view class="page">
		<view style="background-color:#fff;height:180rpx;position:fixed;width:750rpx;">
			<u-subsection :list="modelTabs" mode="subsection" active-color="#3D99F5" height="90" :current="currentModel"
				@change="changModel"></u-subsection>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :bold="false" bar-height="4"
				bar-width="80" height="90"></u-tabs>
		</view>
		<view style="height:180rpx;"> </view>
		<view style="background-color: #fff;border-radius: 20rpx;margin:30rpx 40rpx;padding:30rpx;"
			v-for="item in productListData" :key="item.id">
			<view style="display:flex;justify-content:space-between;align-items:center;">
				<view style="font-size:30rpx;"> 任务编号：2015262452 </view>
				<view
					style="width:120rpx;height:48rpx;color:#3D99F5;border-radius:24rpx;font-size: 24rpx;text-align:center;line-height:48rpx;">
					接单中 </view>
			</view>
			<u-line margin="20rpx 0" color="#E1E8FB" />
			<view style="line-height:40rpx;font-size:28rpx;">
				工期(天)：22
			</view>
			<view style="line-height:40rpx;font-size:28rpx;">
				施工地点：江苏南京鼓楼
			</view>
			<u-line margin="20rpx 0" color="#E1E8FB" />
			<view style="display:flex;align-items:center;justify-content:space-between">
				<view style="color:#BFBFBF;font-size:28rpx;"> 2024-12-08 </view>
				<view style="color:#3D99F5;">
					<u-icon name="order" style="margin-right:6rpx;"></u-icon>
					任务详情
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				modelTabs: [{
					name: '我下的单'
				}, {
					name: '我接的单'
				}],

				// 1接单中 2施工中 3已完工 4已评价
				list: [{
					name: '接单中'
				}, {
					name: '施工中'
				}, {
					name: '已完工'
				}, {
					name: '已评价'
				}],
				current: 0,
				userInfo: {},
				productListData: [{}, {}, {}, {}]
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('user')
		},
		methods: {
			changModel(index) {
				this.currentModel = index;
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					this.page.taskStateLess = 3
					this.page.taskStateGreater = 1
				} else if (index == 1) {
					this.page.taskStateLess = 5
					this.page.taskStateGreater = 2
				} else if (index == 2) {
					this.page.taskStateLess = 7
					this.page.taskStateGreater = 4
				} else if (index == 3) {
					this.page.taskStateLess = null
					this.page.taskStateGreater = 6
				}
				this.getProductPage()
			},
			getProductPage() {
				let param = {
					currentPage: 1,
					pageSize: 20,
					executorId: uni.getStorageSync('user').id,
					taskStateLess: this.page.taskStateLess,
					taskStateGreater: this.page.taskStateGreater
				}
				this.$u.api.getProductPage(param).then(res => {
					this.productListData = res.items
				})
			},

			taskStateStyle(val) {
				// 1未接单 2未开工 3进行中 4已完工 5已付款 6已评价 7已作废
				let name = ""
				if (val.auditState == 1) {
					name = "#ff0000"
				} else if (val.auditState == 3) {
					name = "#ff0000"
				} else if (val.taskState == 1) {
					name = "#ff9b06"
				} else if (val.taskState == 2) {
					name = "#ff9b06"
				} else if (val.taskState == 3) {
					name = "#409EFF"
				} else if (val.taskState == 4) {
					name = "#409EFF"
				} else if (val.taskState == 5) {
					name = "#67C23A"
				} else if (val.taskState == 6) {
					name = "#67C23A"
				} else if (val.taskState == 7) {
					name = "#F56C6C"
				}
				return name
			},
			shoucang(val) {
				let name = false
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						name = true
					}
				})
				return name
			},
			deleteShou(val) {
				let id = ""
				this.collectionData.forEach(res => {
					if (res.objectId == val.id) {
						id = res.id
					}
				})
				this.$u.api.collectionDelete({
					id: id
				}).then(res => {
					this.getCollectionAll()
				})
			},
		},
		filters: {}
	}
</script>
<style lang='scss' scoped>
	.page {
		min-height: 100%;
		background-color: #F6F9FF;
	}

	::v-deep .u-item-first {
		border-radius: 0 !important;
	}

	::v-deep .u-item-last {
		border-radius: 0 !important;
	}
</style>
